<template>
  <el-container v-loading="loading">

    <div class="tip">
      注意：公众号绑定小程序需要两者都绑定在同一微信开放平台下，如尚未绑定请登录开放平台绑定公众号和小程序， <a href="https://open.weixin.qq.com/" target="_blank">前往开放平台</a>
    </div>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" label-position="left" size="small">
      <!--<el-form-item label="商户号" prop="mchid">-->
        <!--<el-input v-model="ruleForm.mchid"></el-input>-->
      <!--</el-form-item>-->

      <el-form-item label="服务号appid" prop="appid">
        <el-input v-model="ruleForm.appid"></el-input>
      </el-form-item>

      <el-form-item label="服务号密钥" prop="secret">
        <el-input v-model="ruleForm.secret"></el-input>
      </el-form-item>

      <el-form-item label="新订单提醒">
        <el-input v-model="ruleForm.receipt_tpl"></el-input>
        <div class="form-item-tip">
          <span>模板编号：OPENTM406688030</span>
        </div>
        <div class="form-item-tip">
          <span>标题:行业 IT科技 - 互联网|电子商务</span>
        </div>
      </el-form-item>

      <!--<el-form-item label="用户催单通知模板">-->
        <!--<el-input v-model="ruleForm.dun_tpl"></el-input>-->
        <!--<div class="form-item-tip">-->
          <!--<span>模板编号：OPENTM401313400。</span>-->
        <!--</div>-->
        <!--<div class="form-item-tip">-->
          <!--<span>标题:用户催单通知 行业:IT科技 - 互联网|电子商务. 您可以在公众平台查找该模板编号，获取模板id。该功能需要您的公众号为认证服务号</span>-->
        <!--</div>-->
      <!--</el-form-item>-->

      <!--<el-form-item label="商户支付密钥" prop="key">
        <el-input v-model="ruleForm.key"></el-input>
      </el-form-item>-->

      <!--<el-form-item label="微信支付(apiclient_cert.pem)" prop="apiclient_cert">
        <el-input type="textarea" v-model="ruleForm.apiclient_cert"
                  placeholder="使用文本编辑器打开apiclient_cert.pem文件，将文件的全部内容复制进来"></el-input>
        <div class="form-item-tip">
          <span>提示：使用文本编辑器打开apiclient_cert.pem文件，将文件的全部内容复制进来</span>
        </div>
      </el-form-item>

      <el-form-item label="微信支付 (apiclient_key.pem)" prop="apiclient_key">
        <el-input type="textarea" v-model="ruleForm.apiclient_key"
                  placeholder="使用文本编辑器打开apiclient_cert.pem文件，将文件的全部内容复制进来"></el-input>
        <div class="form-item-tip">
          <span>提示：使用文本编辑器打开apiclient_cert.pem文件，将文件的全部内容复制进来</span>
        </div>
      </el-form-item>-->

      <el-form-item label="业务域名效验文件上传状态">
        {{ruleForm.testing == 0 ? '未上传' : '已上传'}}
      </el-form-item>

      <el-form-item label="配置业务域名效验文件">
        <el-upload
          name="testing_file"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess">
          <div>
            <el-button>请选择文件</el-button>
            <p v-if="ruleForm.testing_file">{{ruleForm.testing_file}}</p>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="网页授权效验文件上传状态">
        {{ruleForm.warrant == 0 ? '未上传' : '已上传'}}
      </el-form-item>

      <el-form-item label="网页授权域名效验文件">
        <el-upload
          name="warrant_file"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess">
          <div>
            <el-button>请选择文件</el-button>
            <p v-if="ruleForm.warrant_file">{{ruleForm.warrant_file}}</p>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>

  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,  // 页面加载
        ruleForm: {
          "appid":'',                //类型：String  必有字段  备注：服务号appid
          "secret":'',                //类型：String  必有字段  备注：服务号密钥
          "mchid":'',                //类型：String  必有字段  备注：商户号
          "key":'',                //类型：String  必有字段  备注：商户支付密钥
          "apiclient_cert":'',                //类型：String  必有字段  备注：apiclient_cert证书
          "apiclient_key":'',                //类型：String  必有字段  备注：apiclient_key证书
          "testing":0,                //类型：Number  必有字段  备注：业务域名效验文件0未上传1已上传
          "testing_file":null,                //类型：Number  必有字段  备注：业务域名效验文件
          "warrant":0,                //类型：Number  必有字段  备注：授权域名效验文件0未上传1已上传
          "warrant_file":null,                //类型：Number  必有字段  备注：授权域名效验文件
          "receipt_tpl":"",                //类型：String  必有字段  备注：跑腿人员提醒模板消息id
          "dun_tpl":""                //类型：String  必有字段  备注：用户催单通知
        },
        rules: {
          appid: [
            {required: true, message: '服务号appid不得为空', trigger: 'blur'},
          ],
          secret: [
            {required: true, message: '服务号密钥不得为空', trigger: 'blur'},
          ],
          // mchid: [
          //   {required: true, message: '商户号不得为空', trigger: 'blur'},
          // ],
          // key: [
          //   {required: true, message: '商户密钥不得为空', trigger: 'blur'},
          // ],
          // apiclient_cert: [
          //   {required: true, message: 'apiclient_cert证书不得为空', trigger: 'blur'},
          // ],
          // apiclient_key: [
          //   {required: true, message: 'apiclient_key不得为空', trigger: 'blur'},
          // ],
        },
        formData: null,   // 提交多媒体复合数据
      };
    },
    methods: {
      fileUpload: function (fileInfo) {
        let file = fileInfo.file;
        let filename = fileInfo.filename;
        this.formData.append(filename,file);
        this.ruleForm[filename] = file.name;
      },
      handleAvatarSuccess(response, file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      submitForm(formName) {
        let _this = this;
        let _url = _this.api.updateWechatConfig();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.formData.append('id',_this.ruleForm.id);
            this.formData.append('appid',_this.ruleForm.appid);
            this.formData.append('secret',_this.ruleForm.secret);
            this.formData.append('mchid',_this.ruleForm.mchid);
            this.formData.append('key',_this.ruleForm.key);
            this.formData.append('apiclient_cert',_this.ruleForm.apiclient_cert);
            this.formData.append('apiclient_key',_this.ruleForm.apiclient_key);
            this.formData.append('receipt_tpl',_this.ruleForm.receipt_tpl);
            this.formData.append('dun_tpl',_this.ruleForm.dun_tpl);
            _this.$.ajax({
              url:_url,
              type:'POST',
              data:this.formData,
              processData:false,  //tell jQuery not to process the data
              contentType: false,  //tell jQuery not to set contentType
              //这儿的三个参数其实就是XMLHttpRequest里面带的信息。
              success:function (res) {
                if (res.code == 1) {
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success'
                  });
                } else {
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'warning'
                  });
                }
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },

    mounted: function () {
      let _this = this;
      this.formData = new FormData();
      this.api.getWechatConfig().then(function (res) {
        if (res.code == 1) {
          _this.ruleForm = res.data;
          _this.$set(_this.ruleForm,"testing_file",null);
          _this.$set(_this.ruleForm,"warrant_file",null);
        }
        _this.loading = false;
      }).catch(function (res) {
        throw new Error(error);
      });
    },
  }
</script>

<style scoped>

  .el-container {
    display: block;
  }

  /* 表单 */
  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  /* 图片上传 */
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 400px;
    padding: 5px;
  }
  .avatar-uploader .el-button{
    float: left;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
